<template>
  <div>
    <Topnav titleTxt="精彩跟帖"></Topnav>
    <div class="boxstyle">
      <Comment
        @SendParentId="handleParentId"
        :Comdata="item"
        v-for="(item,index) in comments"
        :key="index"
      ></Comment>
    </div>
    <CommentInput
      ref="textarea"
      @upDateComment="loadComments"
      :parentId="parentId"
      :postId="$route.query.id"
      :nickname="nickname"
    ></CommentInput>
  </div>
</template>
<script>
import Topnav from "@/components/TopNav.vue";
import Comment from "@/views/comments/comment.vue";
import CommentInput from "@/components/CommentInput.vue";
export default {
  components: {
    Topnav,
    Comment,
    CommentInput
  },
  data() {
    return {
      comments: [],
      parentId: "",
      nickname: ""
    };
  },
  mounted() {
    this.loadCommentPage();
  },
  methods: {
    loadCommentPage() {
      this.$axios({
        url: "/post_comment/" + this.$route.query.id,
        method: "GET"
      }).then(res => {
        const { data } = res.data;
        this.comments = data;
      });
    },
    handleParentId(parentId, nickname) {
      //  让textarea显示
      this.$refs.textarea.showTextarea();
      // 将parentid存到data中
      this.parentId = parentId;
      this.nickname = nickname;
    },
    loadComments() {
      //重新加载数据
      this.loadCommentPage();
    }
  }
};
</script>
<style lang="less" scoped>
.boxstyle {
  margin-bottom: 44.444vw;
  //160px
}
</style>